<template>
  <div class="progressing_wrap">
    <div class="scroll_wrap" ref="scrollBox">
      <ul class="order_list" ref="scrollBoxInner">
        <div class="public_none_data" v-if="!list.length && isRequest">There is no relevant content</div>
        <li class="item_box" v-for="(item, index) in list" :key="index" v-else>
          <!-- Above information -->
          <div class="top_box">
            <!-- left -->
            <div class="left_wrap">
              <div class="img_wrap">
                <img :src="item.att_image" alt="">
              </div>
              <div class="txt_wrap">
                <p class="txt1">{{item.att_title}}</p>
                <p class="txt2">eachIDHome purchase restrictions<span class="limit_num">{{item.att_limit}}</span>Pieces  </p>
                <p class="txt3">Receiving currencies:<span class="cion_type">{{item.att_currency}}</span></p>
              </div>
            </div>
            <!-- Right -->
            <div class="right_wrap">
              <span class="time">{{item.att_time}}</span>
            </div>
          </div>
          <!-- Underneath information -->
          <div class="bottom_box">
            <div class="b_left common_box">
              <p class="b_title">Public scale</p>
              <span class="_num">{{item.att_num}}</span>
            </div>
            <div class="b_center common_box">
              <p class="b_title">Price</p>
              <span class="_num">{{item.att_price}}</span>
            </div>
            <div class="b_right common_box">
              <p class="b_title">Remaining time</p>
              <span class="no_start">{{item.count}}</span>
            </div>
          </div>
          <!-- Progress bar -->
          <div class="speed_box">
            <!-- Progress bar -->
            <div class="line_box">
              <div class="inner_box">
                <div class="speed_inner"
                :style="{
                  width: `${item.att_sell}`,
                  height: '100%',
                  background: '#fe6e3a'
                }"
                >
                </div>
              </div>
              <span class="speed_num">{{item.att_sell}}</span>
            </div>
            <!-- Button -->
            <div class="btn public_s_btn" @click="goBuy(index)">purchase</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- Buy bomb box -->
    <div class="modal_wrap" v-if="modalShow">
      <div class="msg_box">
        <!-- head -->
        <div class="msg_title">
          <h4 class="title">purchase</h4>
          <span class="iconfont icon-quxiao" @click="close"></span>
        </div>
        <!-- content -->
        <div class="content">
          <div class="cion_type common_box">
            Payment currencies:{{list[clickTarget].att_currency}}
          </div>
          <div class="price common_box">
            Current price:{{list[clickTarget].att_price}}
          </div>
          <div class="insert_box common_box">
            <div class="box_left">
              <label for="type_name">{{list[clickTarget].att_title}}</label>
              <input type="number" id="type_name" placeholder="input quantity" v-model="num">
            </div>
            <span class="limit_num">limit buy{{list[clickTarget].att_limit}}Pieces</span>
          </div>
        </div>
        <!-- Need to pay -->
        <div class="pay_box">
          <span class="pay_txt">Need to pay</span>
          <span class="money"><span class="pay_num">{{payNum}}&nbsp;</span>{{list[clickTarget].att_currency}}</span>
        </div>
        <!-- confirm button -->
        <div class="btn_wrap">
          <div class="public_btn" @click="sure()">Confirm the purchase</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'progressing',
  data () {
    return {
      isRequest: false, // Have you requested data?
      canRequest: true, // Can you request data, request lock?
      page: 1, // Paging default data
      hasMoreData: true, // Do you have more data?
      count: '', // Count down
      att_in_day: '',
      modalShow: false,
      num: '',
      clickTarget: '',
      list: []
    };
  },
  computed: {
    payNum () {
      if (this.num) {
        return (parseFloat(this.num) * parseFloat(this.list[this.clickTarget].att_price)).toFixed(2);
      } else {
        return '0.00';
      }
    },
    // Two level cipher
    passWord () {
      return this.$store.state.modal.password;
    }
  },
  methods: {
    // Count down
    counTime () {
      this.timer = setInterval(() => {
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].att_in_day > 0) {
            this.list[i].att_in_day--;
            let d = parseInt(this.list[i].att_in_day / 60 / 60 / 24);
            // if (d < 10) d = '0' + d;
            let h = parseInt(this.list[i].att_in_day / 60 / 60 % 24);
            if (h < 10) h = '0' + h;
            let m = parseInt(this.list[i].att_in_day / 60 % 60);
            if (m < 10) m = '0' + m;
            let s = parseInt(this.list[i].att_in_day % 60);
            if (s < 10) s = '0' + s;
            this.$set(this.list[i], 'count', d + 'day' + h + 'hour' + m + 'min' + s + 'second');
          } else {
            this.$set(this.list[i], 'count', '0' + 'day' + '0' + 'hour' + '0' + 'min' + '0' + 'second');
            // clearInterval(this.timer);
          }
        }
      }, 1000);
    },
    // Judging whether real name is true or not
    isName () {
      this.axios.get('index/rename/rename_s').then(({data}) => {
        if (data.status === 201) {
          this.Modal('Real name authentication', 'You do not have real name authentication yet, Please go to the certification first', 'To authenticate', () => {
            this.$router.push('certification');
          });
        } else if (data.status === 200) {
          this.isSetPwd();
        }
      });
    },
    // Determining whether to set payment password
    isSetPwd () {
      this.axios.get('index/users/pay_pass').then(({data}) => {
        if (data.status === 200) {
          this.doBuy();
        } else {
          this.Modal('Set transaction password', 'You need to set up the transaction password before purchasing operation. Please set up immediately.', ['cancel', 'To set up'], () => {
            this.$router.push('setPassword');
          });
        }
      });
    },
    // purchase
    goBuy (index) {
      this.clickTarget = index;
      this.modalShow = true;
    },
    // Close the projectile frame
    close () {
      this.modalShow = false;
      this.num = '';
    },
    sure () {
      if (!this.HasData(this.num)) {
        this.Toast('Please enter purchase quantity');
      } else if (parseFloat(this.num) <= 0) {
        this.Toast('Illegal purchase quantity');
      } else if (parseFloat(this.num) > parseFloat(this.list[this.clickTarget].att_limit)) {
        this.Toast('Exceeding the limit of purchase quantity');
      } else if (!/^[1-9]\d*$/.test(this.num)) {
        this.Toast('please enter an integer');
      } else {
        this.isName();
      }
    },
    doBuy () {
      this.ShowPassword(() => {
        this.axios.post('index/crowdfunding/by_crow', {
          pass: this.passWord,
          num: this.num,
          ids: this.list[this.clickTarget].id
        }).then(({data}) => {
          if (data.status === 200) {
            this.modalShow = false;
            this.Toast('Purchase success');
            this.num = '';
            this.$router.push({path: 'fundingRecord'});
          } else {
            this.Toast(data.message);
            this.num = '';
          }
        });
      });
    },
    // List interface
    getInfo () {
      this.canRequest = false;
      this.axios.post('index/crowdfunding/crow_list', {
        type: 2,
        page: this.page
      }).then(({data}) => {
        this.isRequest = true;
        if (data.status === 200) {
          this.canRequest = true;
          this.page++;
          let resObj;
          resObj = data.data;
          this.counTime();
          if (resObj.length < 10 || !resObj.length || !resObj) {
            this.hasMoreData = false;
          } else {
            this.hasMoreData = true;
          }
          this.list = this.list.concat(resObj);
        } else {
          this.Toast(data.message);
        };
      });
    }
  },
  mounted () {
    this.$refs.scrollBox.onscroll = (e) => {
      let bottomClient = this.$refs.scrollBoxInner.clientHeight - e.target.scrollTop - e.target.clientHeight;
      if (bottomClient < 50 && this.canRequest && this.hasMoreData) {
        clearInterval(this.timer);
        this.getInfo();
      }
    };
    this.getInfo();
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .progressing_wrap{
    background: #f4f5f7;
    position: relative;
    height: 100%;
    padding-top: 180px;
    padding-bottom: 90px;
    .scroll_wrap {
      overflow-y: scroll;
      height: 100%;
      .order_list {
        .item_box {
          width: 90%;
          background: #fff;
          border-radius: 8px;
          box-shadow: 0 0 16px RGBA(36, 135, 255, .15);
          margin: 0 auto;
          margin-top: 36px;
          padding: 0 10px;
          overflow: hidden;
          // Above information
          .top_box {
            width: 100%;
            height: 200px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1Px solid #e5e5e5;
            // left
            .left_wrap {
              width: 66%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .img_wrap {
                width: 180px;
                height: 108px;
                overflow: hidden;
                margin-right: 10px;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
              .txt_wrap {
                height: 100%;
                .txt1 {
                  font-size: 28px;
                  color: #282828;
                }
                .txt2 {
                  font-size: 22px;
                  color: #666666;
                  // line-height: 60px;
                }
                .txt3 {
                  font-size: 26px;
                  color: #5c5c5c;
                  .cion_type {
                    color: #999999;
                  }
                }
              }
            }
            // Right
            .right_wrap {
              height: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: flex-start;
              .time {
                font-size: 22px;
                color: #5c5c5c;
                line-height: 100px;
              }
            }
          }
          // Underneath information
          .bottom_box {
            height: 114px;
            display: flex;
            justify-content: space-between;
            // align-items: center;
            .common_box {
              width: 30%;
              height: 117px;
              &.b_center {
                text-align: center;
              }
              &.b_right {
                width: 60%;
                text-align: right;
              }
              .b_title {
                line-height: 73px;
                font-size: 24px;
                color: #5c5c5c;
              }
              ._num {
                font-size: 26px;
                color: #999999;
              }
              .no_start {
                font-size: 26px;
                color: #fe6e3a;
                // padding-right: 10px;
              }
            }
          }
          // Progress bar
          .speed_box {
            width: 100%;
            height: 45px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            margin-bottom: 32px;
            .line_box {
              width: 70%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .inner_box {
                width: 80%;
                height: 6px;
                background: #f5f5f5;
                border-radius: 8px;
              }
              .speed_num {
                font-size: 22px;
                color: #666666;
                padding-left: 20px;
              }
            }
            // Button
            .btn {
              width: 18%;
              height: 100%;
              font-size: 26px;
              color: #ffffff;
              border-radius: 5px;
              text-align: center;
              line-height: 45px;
            }
          }
          &:last-child {
            margin-bottom: 36px;
          }
        }
        .public_none_data {
          padding-top: 40%;
        }
      }
    }
     // Buy bomb box
    .modal_wrap {
      width: 100%;
      height: 100%;
      min-height: 100%;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.6);
      z-index: 96;
      .msg_box {
        width: 90%;
        background-color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        // head
        .msg_title {
          height: 110px;
          line-height: 110px;
          position: relative;
          .title {
            text-align: center;
            font-size: 34px;
            color: #282828;
            font-weight: normal;
          }
          .icon-quxiao {
            font-size: 46px;
            color: #5c5c5c;
            position: absolute;
            top: 0px;
            right: 40px;
          }
        }
        // Content area
        .content {
          padding: 0 40px;
          .common_box {
            min-height: 90px;
            line-height: 90px;
            color: #5c5c5c;
            font-size: 28px;
            border-bottom: 1Px solid #e5e5e5;
            &.insert_box {
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-bottom: none;
              .box_left {
                width: 65%;
                height: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                label {
                  display: block;
                  max-width: 40%;
                  // padding-right: 10px;
                  line-height: 30px;
                  display: flex;
                  align-items: center;
                }
                input {
                  width: 58%;
                  height: 100%;
                  line-height: 90px;
                  color: #5c5c5c;
                  font-size: 28px;
                  &::placeholder {
                    font-size: 28px;
                    color: #999999;
                    // line-height: 90px;
                  }
                }
              }
              .limit_num {
                font-size: 28px;
                color: #ffa521;
                line-height: 30px;
              }
            }
          }
        }
        // Need to pay
        .pay_box {
          width: 100%;
          height: 120px;
          background: #f6f6f6;
          padding: 0 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .pay_txt {
            font-size: 28px;
            color: #1d1d1e;
          }
          .money {
            display: block;
            width: 60%;
            font-size: 28px;
            color: #ffa521;
            // line-height: 120px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            text-align: right;
            .pay_num {
              display: block;
              width: 70%;
              overflow-y: hidden;
              overflow-x: scroll;
              font-size: 34px;
              color: #ffa521;
              font-weight: bold;
            }
          }
        }
        // Confirm the purchase
        .btn_wrap {
          text-align: center;
          .public_btn {
            margin-top: 28px;
            margin-bottom: 54px;
            box-shadow: 0px 0px 10px 10px #fff4da;
          }
        }
      }
    }
  }
</style>
